| Conditions | 7 |
| Total Lines | 175 |
| Code Lines | 123 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | import { useState, useEffect } from 'react'; |
||
| 28 | |||
| 29 | export default function Map({navigation, API_KEY, position, setPosition, token}): any { |
||
| 30 | const [locationMarker, setLocationMarker] = useState(null); |
||
| 31 | const [currentCity, setCurrentCity] = useState(null); |
||
| 32 | const [zones, setZones] = useState([]); |
||
| 33 | const [scooters, setScooters] = useState([]); |
||
| 34 | const [currentScooter, setCurrentScooter] = useState(null); |
||
| 35 | const [modalVisible, setModalVisible] = useState(false); |
||
| 36 | const [zoneModalVisible, setZoneModalVisible] = useState(false); |
||
| 37 | const [currentZone, setCurrentZone] = useState(null); |
||
| 38 | const [cameraVisible, setCameraVisible] = useState(false); |
||
| 39 | const [journeyModal, setJourneyModal] = useState(false); |
||
| 40 | const [toggleTimer, setToggleTimer] = useState(false); |
||
| 41 | const [markerSelected, setMarkerSelected] = useState(null); |
||
| 42 | |||
| 43 | /** |
||
| 44 | * Set user position |
||
| 45 | */ |
||
| 46 | useEffect(() => { |
||
| 47 | async function fetchPosition(): Promise<void> { |
||
| 48 | const { status } = await Location.requestForegroundPermissionsAsync(); |
||
| 49 | |||
| 50 | // if (status !== 'granted') { |
||
| 51 | // setErrorMessage('Permission to access location was denied'); |
||
| 52 | // return; |
||
| 53 | // } |
||
| 54 | |||
| 55 | const currentLocation = await Location.getCurrentPositionAsync({}); |
||
| 56 | |||
| 57 | const userCoordinates = { |
||
| 58 | //latlang hardcoded for testing |
||
| 59 | latitude: currentLocation.coords.latitude, |
||
| 60 | longitude: currentLocation.coords.longitude |
||
| 61 | // latitude: 56.161013580817986, |
||
| 62 | // longitude: 15.587742977884904 |
||
| 63 | }; |
||
| 64 | |||
| 65 | |||
| 66 | setPosition(userCoordinates); |
||
| 67 | |||
| 68 | mapModel.getClosestCity(position); |
||
| 69 | |||
| 70 | setLocationMarker(<Marker |
||
| 71 | coordinate={{ |
||
| 72 | //latlang hardcoded for testing |
||
| 73 | // latitude: currentLocation.coords.latitude, |
||
| 74 | // longitude: currentLocation.coords.longitude |
||
| 75 | latitude: 56.161013580817986, |
||
| 76 | longitude: 15.587742977884904 |
||
| 77 | }} |
||
| 78 | title="My location" |
||
| 79 | pinColor="blue" |
||
| 80 | flat={false} |
||
| 81 | />); |
||
| 82 | }; |
||
| 83 | |||
| 84 | |||
| 85 | fetchPosition(); |
||
| 86 | |||
| 87 | }, []); |
||
| 88 | |||
| 89 | /** |
||
| 90 | * Set city to city that is closest to user and zones for that city |
||
| 91 | */ |
||
| 92 | useEffect(() => { |
||
| 93 | async function setUpMap(): Promise<void> { |
||
| 94 | const city = await mapModel.getClosestCity(position); |
||
| 95 | |||
| 96 | |||
| 97 | // Set city that is closest to user |
||
| 98 | setCurrentCity(city); |
||
| 99 | |||
| 100 | /** |
||
| 101 | * Set zones on map |
||
| 102 | */ |
||
| 103 | const zones = mapModel.getZones(city); |
||
| 104 | setZones(zones); |
||
| 105 | |||
| 106 | }; |
||
| 107 | setUpMap(); |
||
| 108 | }, []); |
||
| 109 | |||
| 110 | /** |
||
| 111 | * Get scooters for current city, |
||
| 112 | * Updated every 5 seconds |
||
| 113 | */ |
||
| 114 | useEffect(() => { |
||
| 115 | const interval = setInterval(() => { |
||
| 116 | |||
| 117 | // Get scooters |
||
| 118 | async function getScooters() { |
||
| 119 | const city = await mapModel.getClosestCity(position); |
||
| 120 | |||
| 121 | const result = await scooterModel.getScooters(city); |
||
| 122 | |||
| 123 | if (result) { |
||
| 124 | const scooters = result['cityScooters']; |
||
| 125 | |||
| 126 | const sortedScooters = scooterModel.sortAvailableScooters(scooters); |
||
| 127 | setScooters(sortedScooters); |
||
| 128 | }; |
||
| 129 | |||
| 130 | }; |
||
| 131 | |||
| 132 | |||
| 133 | getScooters(); |
||
| 134 | |||
| 135 | }, 5000); |
||
| 136 | return () => clearInterval(interval); |
||
| 137 | }, []); |
||
| 138 | |||
| 139 | |||
| 140 | return ( |
||
| 141 | <View style={styles.container}> |
||
| 142 | <MapView |
||
| 143 | style={styles.map} |
||
| 144 | initialRegion={{ |
||
| 145 | latitude: position.latitude? position.latitude : 56.161013580817986, |
||
| 146 | longitude: position.longitude? position.longitude : 15.587742977884904, |
||
| 147 | latitudeDelta: 0.03, |
||
| 148 | longitudeDelta: 0.03, |
||
| 149 | }} |
||
| 150 | userInterfaceStyle={'dark'} |
||
| 151 | > |
||
| 152 | {locationMarker} |
||
| 153 | |||
| 154 | {scooters.map((s, index) => |
||
| 155 | <Marker |
||
| 156 | coordinate={s['coordinates']} |
||
| 157 | icon={markerIcon(index, markerSelected)} |
||
| 158 | tappable={true} |
||
| 159 | key={index} |
||
| 160 | onPress={() => { |
||
| 161 | setCurrentScooter(s); |
||
| 162 | setModalVisible(true); |
||
| 163 | setMarkerSelected(index); |
||
| 164 | }} |
||
| 165 | > |
||
| 166 | </Marker> |
||
| 167 | )} |
||
| 168 | {zones.map((z, index) => ( |
||
| 169 | <Polygon |
||
| 170 | coordinates={z['coordinates']} |
||
| 171 | strokeColor={z['zoneColor']} |
||
| 172 | strokeWidth={3} |
||
| 173 | fillColor={z['zoneColor']} |
||
| 174 | key={index} |
||
| 175 | tappable={true} |
||
| 176 | onPress={() => { |
||
| 177 | setCurrentZone(z) |
||
| 178 | setZoneModalVisible(true) |
||
| 179 | }} |
||
| 180 | /> |
||
| 181 | ))} |
||
| 182 | </MapView> |
||
| 183 | |||
| 184 | <ScooterModal navigation={navigation} scooter={currentScooter} modalVisible={modalVisible} currentCity={currentCity} setModalVisible={setModalVisible} setJourneyModal={setJourneyModal} setToggleTimer={setToggleTimer} position={position}/> |
||
| 185 | |||
| 186 | <ZoneModal navigation={navigation} zone={currentZone} zoneModalVisible={zoneModalVisible} setZoneModalVisible={setZoneModalVisible} currentCity={currentCity}/> |
||
| 187 | |||
| 188 | |||
| 189 | <JourneyModal navigation={navigation} scooter={currentScooter} journeyModal={journeyModal} setJourneyModal={setJourneyModal} toggleTimer={toggleTimer} setToggleTimer={setToggleTimer}/> |
||
| 190 | |||
| 191 | <Pressable onPress={() => {setCameraVisible(true)}} style={styles.googleLogin}> |
||
| 192 | <Icon |
||
| 193 | name='screen-full' |
||
| 194 | size={15} |
||
| 195 | color='white' |
||
| 196 | /> |
||
| 197 | <Text style={styles.googleText}>Scan to unlock</Text> |
||
| 198 | </Pressable> |
||
| 199 | |||
| 200 | <NavBar navigation={navigation} /> |
||
| 201 | <QrScanner navigation={navigation} cameraVisible={cameraVisible} setCameraVisible={setCameraVisible} scooter={currentScooter} setModalVisible={setModalVisible} currentCity={currentCity} setCurrentScooter={setCurrentScooter}/> |
||
| 202 | </View> |
||
| 203 | |||
| 265 |